window.onload = function () {
    var container = document.getElementById("container");
    var canvas = document.createElement("canvas");
    container.appendChild(canvas)
    canvas.height = container.clientHeight;
    canvas.width = container.clientWidth;
    var gl = canvas.getContext("webgl");

    gl.clearColor(.0, .0, .0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    var VERTEX_SHADER_SOURCE =
        'attribute vec4 a_Position;\n' +
        'void main(){\n' +
        'gl_Position = a_Position;\n' +
        'gl_PointSize = 1.0;\n' +
        '}\n';

    var FRAGMENT_SHADER_SOURCE =
        'void main(){\n' +
        'gl_FragColor = vec4(1.0,1.0,1.0,1.0);\n' +
        '}';

    // 1.创建着色器对象
    var vertex_shader_object = gl.createShader(gl.VERTEX_SHADER);
    var fragment_shader_object = gl.createShader(gl.FRAGMENT_SHADER);

    // 2.着色器对象中添加着色器语言代码资源
    gl.shaderSource(vertex_shader_object, VERTEX_SHADER_SOURCE);
    gl.shaderSource(fragment_shader_object, FRAGMENT_SHADER_SOURCE);
    // 3. 着色器对象对象编译所添加的着色器语言资源代码
    gl.compileShader(vertex_shader_object)
    gl.compileShader(fragment_shader_object)
    // 4. 创建程序对象
    var program = gl.createProgram()
    // 5. 程序对象附着着色器对象
    gl.attachShader(program, vertex_shader_object)
    gl.attachShader(program, fragment_shader_object)
    // 6. 链接程序
    gl.linkProgram(program)
    // 7. 使用程序
    gl.useProgram(program)

    var pointsCollection = []
    for (var i = 0; i < 1000000; i++) {
        pointsCollection.push(Math.random() * 2 - 1, Math.random() * 2 - 1)
    }
    // 1. 创建float32数组
    var vertices = new Float32Array(pointsCollection);

    // 2. 创建缓冲区对象
    var vertexBuffer = gl.createBuffer();

    // 3. 绑定缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    // 4. 为缓冲区添加数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // 5. 关联属性
    var a_Position = gl.getAttribLocation(program, "a_Position");

    // 6. 传入数据
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

    // 7. 使用数据
    gl.enableVertexAttribArray(a_Position);

    // 8. 清空画布
    gl.clearColor(.0, .0, .0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 绘制
    gl.drawArrays(gl.POINTS, 0, pointsCollection.length / 2);
};